*{
    box-sizing: border-box;
}

.flex-container{
    display: flex;   
    flex-direction: row;
    font-size: 30px;
    text-align: center;
}

.Flex-left1{
    background-color: deepskyblue;
    padding: 20px;
    flex: 25%;
}
.Flex-left2{
    background-color: darkgrey;
    padding: 20px;
    flex: 25%;
}

.Flex-right1{
    background-color: deepskyblue;
    padding: 20px;
    flex: 25%;
}
.Flex-right2{
    background-color: darkgrey;
    padding: 20px;
    flex: 25%;
}

@media (max-width:800px) {
   .flex-container{
       flex-direction:column;
    }
}


<h3>Responsive Flexbox</h3>
      
<div class="flex-container">
        
    
<div class="Flex-left1">F1</div>
<div class="Flex-left2">F2</div>    
<div class="Flex-right1">F3</div>    
<div class="Flex-right2">F4</div>    
    
        
</div>